<!doctype html>
<html lang="zh_hans">
<head>
    <meta charset="UTF-8">
    <title>2020年元旦倒计时</title>
    <style>
        #time {
            font-size: 40px;
            color: red;
            text-align: center;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div id="time"></div>
<script>
    window.onload = function () {
        // 1. 获取标签
        var time = document.getElementById('time');
        // 2.自定义将来时间
        var fut_Date = new Date('2020/01/01 00:00:00');
        // 3.开启定时器
        setInterval(function () {
            // 4. 获取现在的时间
            var now_Date = new Date();
            // 5. 获取时间戳
            var now_time = now_Date.getTime();
            var fut_time = fut_Date.getTime();
            // 6. 计算时间戳
            var all_time = fut_time - now_time;
            // 7. 时间转换 (毫秒转秒)
            var allSecond = parseInt(all_time / 1000);
            // 8. 转化正常时间
            var day = dou(parseInt(allSecond / 3600 / 24));
            var hour = dou(parseInt(allSecond / 3600 % 24));
            var min = dou(parseInt(allSecond / 60 % 60));
            var second = dou(parseInt(allSecond % 60));
            //    9. 注入时间
            time.innerText = "距离2020年元旦还有" + day + "天" + hour + "小时" + min + "分钟" + second + "秒";

        }, 1000);

        // 10. 解决显示两位数
        function dou(num) {
            return num >= 10 ? num : "0" + num;
        }
    }
</script>
</body>
</html>